<template>
	<view>
		<view class="content">
			<view class="li">
				<image style="width: 82rpx;height: 82rpx; border-radius: 50%; " :src="user.avatar" mode="aspectFill">
				</image>

				<button class="right_li" type="default" plain="true" @chooseavatar="chooseavatar" open-type="chooseAvatar">
					<text class="right_li_name">更换头像</text>
					<van-icon name="arrow" />
				</button>
			</view>
			<view class="li" @tap="toNname">
				<text>我的昵称</text>
				<view class="right_li">
					<!-- <van-cell-group> -->
					<!-- <van-field :value="value" border="false" custom-style="width:80rpx;padding:0;" /> -->
					<text class="right_li_name">{{ user.nickName }}</text>
					<!-- </van-cell-group> -->
					<van-icon name="arrow" />
				</view>
			</view>
			<view class="li" @tap="toMobile">
				<text>我的手机号码</text>
				<view class="right_li">
					<!-- <van-cell-group> -->
					<!-- <van-field :value="value" border="false" custom-style="width:80rpx;padding:0;" /> -->
					<text class="right_li_name">{{ user.mobile }}</text>
					<!-- </van-cell-group> -->
					<van-icon name="arrow" />
				</view>
			</view>
			<view class="li" @tap="toAddress">
				<text>收货地址</text>
				<van-icon name="arrow" />
			</view>
			<view class="li" @tap="logout">
				<text>退出登录</text>
				<van-icon name="arrow" />
			</view>
		</view>
		<view class="about_text" @tap="toAbout">
			<text>关于孕动伊线</text>
			<van-icon name="arrow" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import baseUrl from "@/api/baseUrl"
	import {
		editUserInfo,
		uploadFile
	} from '@/api/api'
	export default {
		data() {
			return {
				baseUrl,
				value: "萱萱"
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			...mapMutations('user', ['changeAvatar', 'changeToken']),
			toNname() {
				uni.navigateTo({
					url: "/pages/setting/nickname"
				})
			},
			toMobile() {
				uni.navigateTo({
					url: "/pages/setting/mobile"
				})
			},
			async chooseavatar(e) {
				console.log(e)
				let avatarUrl = await uploadFile(e.detail.avatarUrl)
				if (avatarUrl) {
					this.avatars(avatarUrl.data.url, 1)
				} else {
					this.chooseImage()
				}
			},
			chooseImage() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'front',
					success: async (res) => {
						let img = await uploadFile(res.tempFiles[0].tempFilePath)
						if (img.code == 1) {
							this.avatars(img.data.url, 1)
						}
					},
					fail: (err) => {
						console.log(err)
					},
				})
			},

			avatars(image, index = 0) {
				let params = {
					nickname: this.user.nickName,
					mobile: this.user.mobile,
					avatar: image
				}
				editUserInfo(params).then(res => {
					if (res.code == 1) {
						if (index == 1) {
							this.changeAvatar(baseUrl + image)
						} else {
							this.changeAvatar(image)
						}
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			toAddress() {
				uni.navigateTo({
					url: "/pages/location/address"
				})
			},

			toAbout() {
				uni.navigateTo({
					url: "/pages/setting/about"
				})
			},
			// 退出登录
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '是否退出登录',
					success: (e) => {
						console.log('退出', e)
						if (e.confirm) {
							uni.clearStorageSync();
							this.changeToken('');
							uni.navigateBack();
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.about_text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
		margin-top: 22rpx;
	}

	.content {
		background-color: #fff;
		margin-top: 22rpx;

		.li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 2rpx solid #eee;

			.right_li {
				display: flex;
				align-items: center;
				border: 0;
				padding: 0;
				margin: 0;

				.right_li_name {
					color: #333333;
					font-size: 28upx;
					margin-right: 10upx;
				}
			}
		}
	}
</style>